<template>
  <div class="detail-container">
    <div class="detail">
      <div class="detail-left">
        <div class="left-title">申请人信息</div>
        <div class="info">
          <div class="info-item">
            <span class="info-name">姓名：</span>
            <span>{{ detailData.username }} </span>
          </div>
        </div>
        <div class="info">
          <div class="info-item">
            <span class="info-name">部门：</span>
            <span>{{ detailData.departmentName }} </span>
          </div>
          <div class="info-item">
            <span class="info-title">入职时间：</span>
            <span class="info-name">{{ detailData.timeOfEntry }} </span>
          </div>
        </div>
        <el-divider />
        <div class="left-title">请假申请</div>
        <div class="info">
          <div class="info-item">
            <span class="info-name">审批类型：</span>
            <span>{{ detailData.processKey==='process_leave'?'请假':detailData.processKey==='process_overtime'?'加班':'离职' }} </span>
          </div>
          <div class="info-item">
            <span class="info-name">开始时间：</span>
            <span>{{ procData.startTime }} </span>
          </div>
        </div>
        <div class="info">
          <div class="info-item">
            <span class="info-name">休假类别：</span>
            <span>{{ detailData.processName }} </span>
          </div>
          <div class="info-item">
            <span class="info-name">结束时间：</span>
            <span>{{ procData.endTime }}</span>
          </div>
        </div>
        <div class="info">
          <div class="info-item">
            <span class="info-name">请假时长：</span>
            <span>{{ procData.duration }}</span>
          </div>
          <div class="info-item">
            <span class="info-name">申请单位：</span>
            <span>{{ procData.applyUnit }}</span>
          </div>
        </div>
        <div class="info">
          <div class="info-item">
            <span class="info-name">申请原因：</span>
            <span>{{ procData.reason }}</span>
          </div>
          <div class="info-item">
            <span class="info-name">审批状态：</span>
            <span>{{ detailData.processState===0?'已提交':detailData.processState===1?'审批中'
              :detailData.processState===2?'审批通过':detailData.processState===3?'审批不通过':'撤销' }}</span>
          </div>
        </div>
      </div>
      <div class="detail-right">
        <div class="detail-right-title">审批记录</div>
        <el-steps :space="100" direction="vertical" :active="1">
          <el-step v-for="item in detailList" :key="item.taskId" :description="item.handleTime" status="success" :title="item.handleUserName +' '+item.handleOpinion " />
        </el-steps>
      </div>
    </div>
  </div>
</template>

<script>
import { checkApprovalDetail, checkApprovalData } from '@/api/approval'
export default {
  name: 'ApprovalDetail',
  data() {
    return {
      detailList: [],
      detailData: [],
      procData: []
    }
  },
  watch: {
    detailData() {
      this.procData = JSON.parse(this.detailData.procData)
    }
  },
  created() {
    this.checkApproval()
  },
  methods: {
    async checkApproval() {
      this.detailList = await checkApprovalDetail(this.$route.query.id)
      this.detailData = await checkApprovalData(this.$route.query.id)
    }

  }
}
</script>

<style lang="scss" scoped>
.detail-container{
  padding: 15px;
  background: #f5f6f8;
  width: 100%;
  min-height: calc(100vh - 80px);
.detail {
    height: 330px;
    display: flex;
    .detail-left{
    width: 75%;
    padding: 20px;
    margin-right: 10px;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    .left-title{
      margin-bottom: 20px;
      color: #383c4e;
    }
    .info {
      display: flex;
      .info-item {
        width: 280px;
        margin: 5px;
         font-size: 14px;
        .info-title {
          margin-right: 10px;
          color: #646a63;
        }
        .info-name {
          color: #121826;
        }
      }
    }
  }
  .detail-right {
    width: 25%;
    padding: 0 20px;
    background-color: #fff;
    .detail-right-title {
      font-size: 16px;
      margin: 20px 0;
      color: #383c4e;
    }
  }
  }

}
</style>
